<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<script type="text/javascript" src="${ctx }/jslib/plupload2.1.9/plupload.full.min.js" ></script>
<script type="text/javascript" src="${ctx }/jslib/plupload2.1.9/i18n/zh_CN.js" ></script>
<script type="text/javascript">
$(function(){
	var uploader = new plupload.Uploader({
		runtimes : 'silverlight,html5,flash,html4',//运行环境，按顺序优先加载
		browse_button : 'pickfiles', //打开文件浏览窗口
		container: 'container', //哪一个容器
		max_file_size : '1gb',//最大文件大小，100b, 10kb, 10mb, 1gb
		chunk_size : '1gb',//分块大小，小于这个大小的不分块
		url: "${ctx }/file/ajaxLoadFile",//上传地址
		flash_swf_url : '${ctx }/jslib/plupload2.1.2/Moxie.swf',//FLASH控件加载地址
		silverlight_xap_url : '${ctx }/jslib/plupload2.1.2/Moxie.xap',//Sliverlight控件加载地址
		resize : { width : 320, height : 240, quality : 90 },//如果可以的话压缩图片
		multi_selection: false,//是否可以多选文件(多文件上传)
		filters : [
// 			{title : "图片文件(jpg,gif,png,jpeg)", extensions : "jpg,gif,png,jpeg"},
			{title : "所有文件(*.*)", extensions : "*"}
		],//文件过滤器

		init: {
			PostInit: function(up) {//初始化时
				//$('#filelist').html("已检测到支持的运行环境："+up.runtime);
				$('#filelist').html("");
				$('#uploadfiles').get(0).onclick = function() {//给上传按钮绑定点击事件
					uploader.start();
					return false;
				};
			},

			FilesAdded: function(up, files) {//选择文件后
				//删除已选的文件，
				$('#filelist').get(0).innerHTML = "";
				$.each(up.files, function (i, file) { 
	                if (up.files.length <= 1) { 
	                    return; 
	                } 
	                up.removeFile(file); 
	            }); 
				plupload.each(files, function(file) {
					$('#filelist').get(0).innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
				});
			},
			
			UploadProgress: function(up, file) {//上传文件时的进度
				$('#'+file.id).get(0).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
			},
			
			FileUploaded: function(up, file, info){//上传完成后执行服务器的返回信息
				var response = $.parseJSON(info.response);
				//layer.alert(response.msg);
				$("#fileNames").val(response.msg);
			},

			Error: function(up, err) {//出错时
				$('#console').get(0).innerHTML += "\nError #" + err.code + ": " + err.message;
			}
		}
	});

	uploader.init();
});
</script>
<input type="hidden" id="fileNames" name="fileNames"> 
<div id="filelist">你的浏览器不支持上传文件</div>
<br />
<div id="container">
    <button id="pickfiles">选择文件</button> 
    <button id="uploadfiles">上传</button>
</div>
<br />
<pre id="console"></pre>